<script>
import * as weapon from '../../utils/weapon.js'
import '../../less/dataFilter.less'
export default {
	name:'data-filter',
	data () {
		return {
			usedFilter:[],
			date:"",
			filterForm:{},
			filterAnimateType:false,
			filtersIsShow:true,
			_usedFilterIsShow:false,
			emitAvailable:false
		}
	},
	props:{
		filters:{
			type:Array,
			default:[]
		},
		filterAction:{
			type:null,
			default:""
		},
		sessionStorageFilterKey:{
			type:String
		}
	},
	watch:{
		'filterList':{
			handler(newData){
				var filter={}
				newData.forEach((item,index)=>{
					if(item.value){
						filter[item.field]=item.value
					}
				})
				this.paramsFilter=filter
				if(this.emitAvailable){
					this.$emit("do-filter",this.paramsFilter);
					this.emitAvailable=false;
				}
			},
			deep:true
		}
	},
	computed:{
		filterList(){
			return this.filters
		}
	},
	created(){

	},
	beforeMount(){
		var usedFilter;
		if( usedFilter= sessionStorage.getItem(this.sessionStorageFilterKey)){
			this.usedFilter=JSON.parse(usedFilter)
		}
		for(let index in this.usedFilter){
			this.$set(this.filterForm,this.usedFilter[index].prop,this.usedFilter[index].value);
		}
	},
	methods:{
		handleDateInput(index,val){
			console.log("^^^^^^",val);
			if(val){
				console.log(moment(val).format("YYYY-MM-DD"));
				var dateFormate=moment(val).format("YYYY-MM-DD");
				this.$set(this.filterList[index],'value',dateFormate);
			}else{
				this.$set(this.filterList[index],'value','');
			}
		},
		handleDateChange(index,val){
			console.log("$$$$$$$$$$$$$",val);
		},
		handleFilter(){
			console.log("paramsFilter &&:",this.paramsFilter)
			this._usedFilterIsShow=true;
			this.usedFilter=[];
			this.filterList.forEach((item,index)=>{
				if(this.filterForm[item.prop]!=""){
					this.usedFilter.push(item);
				}
				this.filterForm[item.prop]=item.value;
			});
			sessionStorage.setItem(this.sessionStorageFilterKey,JSON.stringify(this.usedFilter));
			this.$emit("do-filter",this.paramsFilter);
		},
		handleReset(){
			for(let prop in this.filterForm){
				this.filterForm[prop]="";
			}
			this.usedFilterIsShow=false;
			this.filterList.forEach((item,index)=>{
				item.value="";
			});
			sessionStorage.setItem(this.sessionStorageFilterKey,JSON.stringify(this.usedFilter));
			this.$emit("do-filter",this.paramsFilter);
		},
		handleInput(index,val){
			console.log("@@@",val)
			this.$set(this.filterList[index],'value',val)
		},
		listToggleShow(){
			this.filterAnimateType=this.filterAnimateType? false : true;
			this.filtersIsShow=true;
		},
		handleHidefilters(){
			this.filterAnimateType=false;
		},
		animationEnd1(){
			this.filtersIsShow=this.filterAnimateType;
		},
		handelFilterDel(index){
			this.emitAvailable=true;
			this.$set(this.filterList[index],'value',"")
		}
	},
	render(h){
		var _this=this;
		return(
			<div class="data-filter">
				<form ref="filterForm" class="filter-list">
					{weapon.arrayEach(_this.filterList,(item,index)=>{
						switch(item.type){
							case "input":
								return(
									<div class="filter-item">
										<label>{item.label}</label>
										<el-input class="item-content"
											name={item.field}
											value={item.value}
											on-input={_this.handleInput.bind(this,index)}>
										</el-input>
									</div>
								)
								break;
							case "select":
								return(
									<div class="filter-item">
										<label>{item.label}</label>
										<el-select
											class="item-content"
											clearable={true}
											on-input={_this.handleInput.bind(this,index)}
											name={item.field}
											value={item.value}
											placeholder="请选择">
											{item.options ? weapon.arrayEach(item.options,(option,index)=>{
												let label=null,value=null;
												if(_.isObject(option)){
													label=option.label
													value=option.value
												}else{
													label=option
													value=option
												}
												return(
													<el-option label={label} value={value} key={value} />
												)
											}):''}
										</el-select>
									</div>
								)
								break;
							case "date":
								return(
									<div class="filter-item">
										<label>{item.label}</label>
										<el-date-picker
											class="item-content"
											type="date"
											on-input={_this.handleDateInput.bind(this,index)}
											on-change={_this.handleDateChange.bind(this,index)}
											value={item.value}
											placeholder="选择日期">
										</el-date-picker>
									</div>
								)
								break;
							default:
								break;
						}
					})}
				</form>
				<el-button type="primary" class="btn-doFilter" on-click={this.listToggleShow} on-click={this.handleFilter}>查询</el-button>
			</div>
		)
	}
}
</script>

<style>
</style>
